<template>
	<div class="w1024-wrap">
		<div class="page">
			<div class="head" style="margin-bottom: 10px;">
				<div class="search-wrap">
					<div class="clear">
						<div class="form-item left">
							<p class="form-item-title">申请人：</p>
							<div class="form-item-content">
								<el-input clearable v-model="searchData.creator" placeholder="请输入申请人"></el-input>
							</div>
						</div>
						<div class="form-item left">
							<p class="form-item-title">客户姓名：</p>
							<div class="form-item-content">
								<el-input clearable v-model="searchData.customername" placeholder="请输入客户姓名"></el-input>
							</div>
						</div>
						<div class="form-item left">
							<p class="form-item-title">状态：</p>
							<div class="form-item-content" style="width: 120px;">
								<el-select @change="search" clearable v-model="searchData.refundstatus" placeholder="请选择">
									<el-option key="1" label="待审核" value="1"></el-option>
									<el-option key="2" label="审核中" value="2"></el-option>
									<el-option key="3" label="通过" value="3"></el-option>
									<el-option key="4" label="不通过" value="4"></el-option>
								</el-select>
							</div>
						</div>
					</div>
					<div class="clear">
						<div class="form-item left">
							<p class="form-item-title" style="width: 100px;">申请时间：</p>
							<div class="form-item-content" style="width: 230px;">
								<el-date-picker clearable style="width:230px;" v-model="value1" value-format="yyyy-MM-dd" type="daterange" @change="applyTimeChange" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期">
								</el-date-picker>
							</div>
						</div>
						<div class="form-item left">
							<el-button class="left" type="primary" @click="search">查询</el-button>
							<el-button class="left" type="default" @click="reset">重置</el-button>
						</div>
					</div>
				</div>
			</div>
			<template v-if="list.length">
				<div class="table-wrap">
					<el-table ref="table" v-loading="loading" size="middle" :data="list" style="width: 100%">
						<el-table-column label="申请人" min-width="60">
							<template slot-scope="scope">
								<span>{{scope.row.username||'-'}}</span>
							</template>
						</el-table-column>
						<el-table-column label="客户姓名" min-width="60">
							<template slot-scope="scope">
								<span>{{scope.row.customername||'-'}}</span>
							</template>
						</el-table-column>
						<el-table-column label="集团名称" min-width="70">
							<template slot-scope="scope">
								<span>{{scope.row.companyname||'-'}}</span>
							</template>
						</el-table-column>
						<el-table-column label="产品" min-width="60">
							<template slot-scope="scope">
								<span>{{scope.row.isring?'企业彩铃':'视频彩铃'}}</span>
							</template>
						</el-table-column>
						<el-table-column  label="退款金额" min-width="60">
							<template slot-scope="scope">
								<span>{{scope.row.refund/100}}元</span>
							</template>
						</el-table-column>
						<el-table-column label="状态" min-width="60">
							<template slot-scope="scope">
								<span v-if="scope.row.refundstatus==1">待审核</span>
								<span v-else-if="scope.row.refundstatus==2">审核中</span>
								<span v-else-if="scope.row.refundstatus==3">通过</span>
								<span v-else-if="scope.row.refundstatus==4">不通过</span>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<el-table-column label="申请时间" min-width="100">
							<template slot-scope="scope">
								<span>{{scope.row.createtime}}</span>
							</template>
						</el-table-column>
						<el-table-column label="审核时间" min-width="100">
							<template slot-scope="scope">
								<span>{{scope.row.updatetime||'-'}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="50" label="操作">
							<div slot-scope="scope" class="btn-inner clear">
								<router-link :to="'/crm/auditdetail/'+scope.row.crmrefunduid" class="btn" title="详情">
									<img src="../../assets/images/crm/detail.svg" />
								</router-link>
								<div class="btn" title="审核" v-if="scope.row.refundstatus==1" @click="audit(scope.row)">
									<img src="../../assets/images/crm/audit.svg" />
								</div>
							</div>
						</el-table-column>
					</el-table>
				</div>
				<el-pagination :current-page="this.searchData.pagenow" class="text-center" layout="prev, pager, next,sizes" prev-text="上一页" next-text="下一页" @size-change="pageSizeChange" @current-change="currentPageChange" :total="totalCount">
				</el-pagination>
			</template>
			<no-data v-if="!loading&&!list.length"></no-data>
		</div>
		
		<el-dialog title="审核" top="15vh" :visible.sync="auditVisible" width="500px" center>
			<div class="dialog-content clear" style="padding: 10px 10px 20px;">
				<div class="clear">
					<div class="form-item" >
						<p class="form-item-title bold" style="padding-right: 22px;">退款信息</p>
					</div>
				</div>
				<div class="clear">
					<div class="form-item">
						<p class="form-item-title">申请人：</p>
						<div class="form-item-content">
							{{obj.username}}
						</div>
					</div>
				</div>
				<div class="clear">
					<div class="form-item" >
						<p class="form-item-title">退款产品：</p>
						<div class="form-item-content">
							{{obj.isring?'企业彩铃':'视频彩铃'}}
						</div>
					</div>
				</div>
				<div class="clear">
					<div class="form-item" >
						<p class="form-item-title">退款金额：</p>
						<div class="form-item-content bold">
							{{obj.refund/100}}元
						</div>
					</div>
				</div><div class="clear">
					<div class="form-item" >
						<p class="form-item-title">客户姓名：</p>
						<div class="form-item-content">
							{{obj.customername||'-'}}
						</div>
					</div>
				</div>
				<div class="clear" style="margin-bottom: 14px;">
					<div class="form-item" >
						<p class="form-item-title">集团名称：</p>
						<div class="form-item-content">
							{{obj.companyname}}
						</div>
					</div>
				</div>
				<div class="clear" style="margin-bottom: 20px;">
					<div class="form-item" >
						<p class="form-item-title">审核状态：</p>
						<div class="form-item-content">
							<el-select style="width:120px;" v-model="auditObj.refundstatus" placeholder="请选择">
								<el-option key="3" label="通过" :value="3"></el-option>
								<el-option key="4" label="不通过" :value="4"></el-option>
							</el-select>
						</div>
					</div>
				</div>
				<div class="clear">
					<div class="form-item" >
						<p class="form-item-title">审核备注：</p>
						<div class="form-item-content">
							<el-input size="small" rows="4" resize="none" type="textarea" style="width:330px;" maxlength="500" v-model="auditObj.note" placeholder="请输入"></el-input>
						</div>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="auditVisible=false">取 消</el-button>
			    <el-button type="primary" @click="confirmAudit">确定</el-button>
			</span>
		</el-dialog>
		<input type="hidden" name="" id="" :value="user" />
	</div>
</template>

<script>
	import NoData from '@/components/NoData'
	import { baseUrl,setCookie,getCookie} from '@/utils/common'
	export default {
		name: 'Pool',
		components: {
			NoData,
		},
		data() {
			const that=this
			return {
				baseUrl,
				level:'',
				value1: '',
				loading: false,
				network: false,
				totalCount: 0,
				tipText:'',
				auditVisible:false,
				searchData: {
					shownum: 10,
					pagenow: getCookie('page')?Number(getCookie('page')):1,
					creator:'',
					customername:'',
					refundstatus:'',
					starttime:'',
					endtime:'',
				},
				list: [],
				obj:{},
				auditObj:{}
			}
		},
		computed:{
			user(){
				if(this.$store.state.user){
					this.level=this.$store.state.user.crmLevel
				}
				return this.$store.state.user
			}
		},
		beforeRouteLeave(to,from,next){
			console.log(to)
			if(to.name=='AuditDetail'){
				setCookie('page',this.searchData.pagenow,1)
				sessionStorage.setItem('searchData',JSON.stringify({
					type:'audit',
					data:this.searchData
				}))
			}
			next()
		},
		mounted() {
			setCookie('page',0,-1)
			if(sessionStorage.getItem('searchData')){
				var data=JSON.parse(sessionStorage.getItem('searchData'))
				if(data.type=='audit'){
					Object.assign(this.searchData,data.data)
					this.value1=this.searchData.starttime&&this.searchData.endtime?[this.searchData.starttime,this.searchData.endtime]:''
				}
				sessionStorage.removeItem('searchData')
			}
			this.getData()
		},
		methods: {
			applyTimeChange(val) {
				if(val) {
					this.searchData.starttime = val[0]
					this.searchData.endtime = val[1]
				} else {
					this.searchData.starttime = ''
					this.searchData.endtime = ''
				}
			},
			pageSizeChange(pageSize) {
				this.searchData.shownum = pageSize
				this.getData()
			},
			currentPageChange(page) {
				this.searchData.pagenow = page
				this.getData()
			},
			search() {
				this.searchData.pagenow = 1
				this.getData()
			},
			reset() {
				this.searchData = {
					shownum: 10,
					pagenow: getCookie('page')?Number(getCookie('page')):1,
					creator:'',
					customername:'',
					refundstatus:'',
					starttime:'',
					endtime:'',
				}
				this.value1=''
				this.getData()
			},
			getData() {
				this.loading = true
				console.log(this.searchData)
				this.$request.queryRefundList(this.searchData)
					.then(res => {
						if(res.code == 0) {
							this.list = res.list
							this.totalCount = res.page.totalresult
						} else {
							this.msgError(res.msg)
						}
						this.loading = false
					})
			},
			
			audit(obj) {
				this.obj=obj
				this.auditObj={
					customeruid:obj.customeruid,
					crmrefunduid:obj.crmrefunduid,
					refundstatus:3,
					note:''
				}
				this.auditVisible=true
			},
			confirmAudit(){
				if(this.network){
					return
				}
				this.network=true
				console.log(this.auditObj)
				this.$request.saveAudit(this.auditObj)
				.then(res=>{
					if(res.code==0){
						this.msgSuccess('操作成功')
						this.$store.commit('setWaitAuditCount')
						this.auditVisible=false
						this.getData()
					}else{
						this.msgError(res.msg)
					}
					this.network=false
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.page {
		.head {
			border-bottom: 10px solid #f5f5f5;
			padding: 0 20px;
		}
		.search-wrap {
			padding: 24px 10px 8px;
			.el-button {
				img,
				i {
					margin-right: 3px;
				}
				i {
					font-size: 12px;
					font-weight: bold;
				}
			}
		}
		>>>.el-table {
			th {
				>.cell {
					padding-left: 6px;
					padding-right: 6px;
					text-align: center;
				}
			}
			td {
				>.cell {
					padding-left: 4px;
					padding-right: 4px;
					text-align: center;
					font-size: 12px;
					line-height: 16px;
				}
			}
		}
	}
	
	.btn-inner {
		margin-top: -8px;
		margin-left: -8px;
		.btn {
			width: 24px;
			height: 24px;
			margin-left: 8px;
			margin-top: 8px;
			text-align: center;
			line-height: 24px;
			color: #fff;
			font-weight: bold;
			font-size: 14px;
			cursor: pointer;
			float: left;
			border-radius: 2px;
			position: relative;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	>>>.el-dialog__header {
		padding: 16px 20px 16px 30px;
		text-align: left;
		font-weight: bold;
	}
	
	>>>.el-dialog--center .el-dialog__body{
		padding: 0 16px 10px;
		.dialog-content {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			padding: 20px 10px;
			>.clear {
				margin-bottom: 7px;
				&:last-child{
					margin-bottom: 0;
				}
			}
			.form-item {
				margin-bottom: 0px;
				float: left;
				.form-item-title {
					width: 100px;
				}
				.form-item-content {
					width: 180px;
					.template-download{
						text-decoration: underline;
						color: #409EFF;
					}
				}
			}
		}
	}
</style>